<template>
    <div class="ele-body">
        <el-card shadow="never">
            <el-form
            :model="where"
            label-width="90px"
            class="ele-form-search"
            @keyup.enter.native="reload"
            @submit.native.prevent>
                <el-row :gutter="15">
                    <el-col :lg="12" :md="12">
                        <el-form-item label="结算周期:">
                            <el-date-picker
                                style="width: 100%"
                                v-model="where.record_date"
                                type="daterange"
                                value-format="yyyy-MM-dd"
                                label-format="yyyy-MM-dd"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                            >
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :lg="12" :md="12">
                        <el-form-item label="推广员:">
                            <PageSelect
                            :placeholder="'请选择推广员'"
                            v-model="where.promote_id"
                            :whereName="'realname'"
                            :url="'/userpromote/index'"
                            :optionLable="'realname'"
                            :optionvalue="'id'"
                            :multiple="false"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :lg="12" :md="12">
                        <el-form-item label="游戏包:">
                            <PageSelect
                            :placeholder="'请选择游戏包'"
                            v-model="where.package_id"
                            :whereName="'package_name'"
                            :url="'/Package/getChannelPackage'"
                            :optionLable="'package_name'"
                            :optionvalue="'id'"
                            :multiple="false"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :lg="12" :md="12">
                        <el-form-item label="一级推广员:">
                            <PageSelect
                            :placeholder="'请选择一级推广员'"
                            v-model="where.promote_1_id"
                            :whereName="'realname'"
                            :url="'/userpromote/index?level=1'"
                            :optionLable="'realname'"
                            :optionvalue="'id'"
                            :multiple="false"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :lg="12" :md="12">
                        <el-form-item label="状态:" prop="status">
                            <el-select
                                clearable
                                v-model="where.status"
                                placeholder="请选择状态"
                                class="ele-fluid"
                            >
                                <el-option label="未结算" :value="1" />
                                <el-option label="结算中" :value="2" />
                                <el-option label="已结算" :value="3" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :lg="12" :md="12">
                        <el-form-item label="结算类型:" prop="jies_type">
                            <el-select
                                clearable
                                v-model="where.jies_type"
                                placeholder="请选择结算类型"
                                class="ele-fluid"
                            >
                                <el-option label="周结" :value="1" />
                                <el-option label="日结" :value="2" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :lg="12" :md="12">
                        <el-form-item label="结算时间:">
                            <el-date-picker
                                style="width: 100%"
                                v-model="where.settlement_time"
                                type="daterange"
                                value-format="yyyy-MM-dd"
                                label-format="yyyy-MM-dd"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                            >
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :lg="6" :md="12">
                        <div class="ele-form-actions">
                            <el-button
                                type="primary"
                                icon="el-icon-search"
                                class="ele-btn-icon"
                                size="small"
                                @click="reload"
                                >查询
                            </el-button>
                            <el-button @click="reset" size="small">重置</el-button>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
            <div style="display: flex;margin-bottom: 10px;">
                        <el-upload
                            accept=".xls,.xlsx"
                            class="upload-demo"
                            :action="uploadImgUrl"
                            :on-preview="handlePreview"
                            :on-remove="handleRemove"
                            :on-success="successUpload"
                            :before-remove="beforeRemove"
                            multiple
                            :limit="1"
                            :headers="myHeaders"
                            :on-exceed="handleExceed"
                            :file-list="fileList"
                        >
                            <el-button
                            icon="el-icon-upload2"
                            class="ele-btn-icon"
                            size="small"
                            >
                            导入事件金额
                            </el-button>
                        </el-upload>
                        <el-button
                            type="primary"
                            icon="el-icon-download"
                            size="small"
                            style="margin-left: 10px;"
                            @click="templateImport()"
                        >
                            事件金额模板
                        </el-button>
                        <el-button
                            size="small"
                            type="primary"
                            @click="modifiedScaleMore()"
                            >修改分成比例
                        </el-button>
                        <el-button
                            size="small"
                            type="success"
                            @click="settleAccounts()"
                            >结算
                        </el-button>
                        <el-button
                            size="small"
                            type="warning"
                            @click="regenerate()"
                            >重新生成预结算单
                        </el-button>
                        <el-upload
                            accept=".xls,.xlsx"
                            class="upload-demo"
                            :action="uploadImgUrl"
                            :on-preview="handlePreview1"
                            :on-remove="handleRemove1"
                            :on-success="successUpload1"
                            :before-remove="beforeRemove"
                            multiple
                            :limit="1"
                            :headers="myHeaders"
                            :on-exceed="handleExceed"
                            :file-list="fileList1"
                            style="margin-left: 10px;"
                        >
                            <el-button
                            icon="el-icon-upload2"
                            class="ele-btn-icon"
                            size="small"
                            >
                            导入自动结算
                            </el-button>
                        </el-upload>
                        <el-button
                            type="primary"
                            icon="el-icon-download"
                            size="small"
                            style="margin-left: 10px;"
                            @click="updateAuto()"
                        >
                            自动结算模板
                        </el-button>
                        <el-button
                            size="small"
                            style="margin-left: 10px;"
                            @click="exportExcel()"
                        >
                            导出
                        </el-button>
                    </div>
            <el-row :gutter="15" class="total-card">
                <el-col :lg="6" :md="6">违规事件总金额:{{ allData.violation_all_money }}</el-col>
                <el-col :lg="6" :md="6">预结算总金额:{{ allData.sum_money }}</el-col>
                <el-col :lg="6" :md="6">事件总金额:{{ allData.event_money }}</el-col>
                <el-col :lg="6" :md="6">总充值:{{ allData.total_money }}</el-col>
            </el-row>
            <!-- 数据表格 -->
            <el-table :data="tableData" border style="width: 100%" :height="tableHeight" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="45" align="center" fixed="left"></el-table-column>
                <el-table-column label="日期" prop="record_date" width="120" align="center"></el-table-column>
                <el-table-column label="推广员名称" prop="promote_account" width="120" align="center"></el-table-column>
                <el-table-column label="游戏名称" prop="package_name" width="120" align="center"></el-table-column>
                <el-table-column label="总充值" prop="total_money" width="120" align="center"></el-table-column>
                <el-table-column label="分成比例" prop="proportion" width="120" align="center"></el-table-column>
                <el-table-column label="预结算金额" prop="sum_money" width="120" align="center"></el-table-column>
                <el-table-column label="事件金额" prop="event_money" width="120" align="center"></el-table-column>
                <el-table-column label="事件原因" prop="remark" width="120" align="center"></el-table-column>
                <el-table-column label="违规事件金额" prop="violation_amount" width="120" align="center"></el-table-column>
                <el-table-column label="违规事件原因" prop="violation_remark" width="120" align="center"></el-table-column>
                <el-table-column label="结算时间" prop="settlement_time" width="120" align="center"></el-table-column>
                <el-table-column label="结算状态" width="120" align="center">
                    <template slot-scope="scope">
                        <div v-if="scope.row.status==1">未结算</div>
                        <div v-else-if="scope.row.status==2">结算中</div>
                        <div v-else-if="scope.row.status==3">已结算</div>
                    </template>
                </el-table-column>
                <el-table-column label="结算类型" width="120" align="center">
                    <template slot-scope="scope">
                        <div v-if="scope.row.jies_type==1">周结</div>
                        <div v-else-if="scope.row.jies_type==2">日结</div>
                    </template>
                </el-table-column>
                <el-table-column label="最后更新时间" prop="update_time" width="120" align="center"></el-table-column>
                <el-table-column label="操作" width="200" align="center" fixed="right">
                    <template slot-scope="scope">
                        <div style="display: flex;">
                            <el-button
                                size="small"
                                type="primary"
                                class="ele-btn-icon"
                                @click="modifiedScaleOne(scope.row)"
                                >修改分成比例
                            </el-button>
                            <el-button
                                size="small"
                                type="danger"
                                icon="el-icon-delete"
                                class="ele-btn-icon"
                                @click="delRow(scope.row)"
                                v-if="scope.row.status==1"
                                >删除
                            </el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <el-dialog
            title="修改分成比例"
            :visible.sync="dialogVisible"
            width="30%"
            >
            <div class="dialog-box">
                <div class="dialog-box-left">分成比例:</div>
                <div>
                    <el-input
                    :placeholder="'请输入分成比例'"
                    v-model="proportion"></el-input>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogSubmit()">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog
            title="重新生成预结算单"
            :visible.sync="visible"
            width="30%"
            >
            <el-form
                :model="dialogForm"
                label-width="90px"
                :rules="dialogRules"
            >
                <el-form-item label="结算周期:">
                    <el-date-picker
                        v-model="dialogForm.record_date"
                        type="daterange"
                        value-format="yyyy-MM-dd"
                        label-format="yyyy-MM-dd"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                    >
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="推广员:" prop="promote_id">
                    <PageSelect
                            :placeholder="'请选择推广员'"
                            v-model="dialogForm.promote_id"
                            :whereName="'realname'"
                            :url="'/userpromote/index'"
                            :optionLable="'realname'"
                            :optionvalue="'id'"
                            :multiple="false"
                            />
                </el-form-item>
                <el-form-item label="游戏包:" prop="package_id">
                    <PageSelect
                            :placeholder="'请选择游戏包'"
                            v-model="dialogForm.package_id"
                            :whereName="'package_name'"
                            :url="'/Package/getChannelPackage'"
                            :optionLable="'package_name'"
                            :optionvalue="'id'"
                            :multiple="false"
                            />
                </el-form-item>
                <el-form-item label="分成比例:" prop="proportion">
                    <el-input
                    :placeholder="'请输入分成比例'"
                    v-model="dialogForm.proportion"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="visible = false">取 消</el-button>
                <el-button type="primary" @click="submit()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import PageSelect from "@/components/pageSelect/index.vue";
import {downloadExcel} from "@/utils/excel-export";
import setting from '@/config/setting'
export default{
    components:{PageSelect},
    data(){
        let token = setting.takeToken()
        return{
            where:{},
            allData:{},
            // 表格数据接口
            url: "/Settlementpre/index",
            // 表格选中数据
            selection:[],
            tableHeight:'calc(100vh - 315px)',
            //修改分成比例弹框使用的id
            ids:[],
            dialogVisible:false,//弹框控制符
            proportion:'',//分成比例
            fileList:[],
            fileList1:[],
            tableData:[],//表格绑定数据
            uploadImgUrl: process.env.VUE_APP_API_BASE_URL + '/upload/uploadFile',
            myHeaders: { Authorization: token },
            visible:false,
            dialogForm:{
                record_date:[],
                promote_id:'',
                package_id:'',
                proportion:''
            },
            dialogRules:[],
        }
    },
    created(){
        this.reload()
    },
    mounted(){

    },
    methods:{
        //导出
        exportExcel(){
            downloadExcel(`Settlementpre/export`, this.where)
        },
        //重新生成预结算单
        regenerate(){
            this.visible=true;
        },
        //重新生成预结算单确认事件
        submit(){
            this.$http.post('/Settlementpre/setSettlementPre',{
                start_time:this.dialogForm.record_date[0],
                end_time:this.dialogForm.record_date[1],
                promote_id:this.dialogForm.promote_id,
                package_id:this.dialogForm.package_id,
                proportion:this.dialogForm.proportion
            }).then(res=>{
                if(res.data.code === 0){
                    this.$message.success('重新生成预结算单成功!')
                    this.visible=false;
                    this.dialogForm={
                        record_date:[],
                        promote_id:'',
                        package_id:'',
                        proportion:''
                    }
                    this.reload()
                }else{
                    this.$message.error(res.data.msg)
                }
            })
        },
        //结算
        settleAccounts(){
            if(!this.where.record_date||this.where.record_date.length==0){
                this.$message.warning('请选择结算周期后,再进行结算!');
                return false;
            }
            if(!this.where.promote_id||this.where.promote_id.length==0){
                this.$message.warning('请选择推广员后,再进行结算!');
                return false;
            }
            if(!this.selection||this.selection.length==0){
                this.$message.warning('请选择需要结算的数据后,再进行结算!');
                return false;
            }
            let ids=[]
            this.selection.forEach(item=>{
                ids.push(item.id)
            })
            this.$http.post('/Settlementpre/getSettlement',{
                record_date:this.where.record_date,
                promote_id:this.where.promote_id,
                ids:ids
            }).then(res=>{
                if(res.data.code=== 0 ){
                    this.$confirm('预结算总金额:'+res.data.data.sum_money+',实际结算总金额:'+res.data.data.jie_money
                    +',事件金额:'+res.data.data.event_money+',事件原因:'+res.data.data.remark
                    ,'结算确认',{
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                    }).then(() => {
                        this.$http.post('/Settlementpre/setSettlement',{
                            record_date:this.where.record_date,
                            promote_id:this.where.promote_id,
                            ids:ids
                        }).then(res=>{
                            if(res.data.code === 0){
                                this.$message.success('结算成功!')
                                this.reload()
                            }else{
                                this.$message.error(res.data.msg)
                            }
                        })
                    }).catch(() => {
                        this.$message.info('已取消结算!')
                    });
                    
                }else{
                    this.$message.error(res.data.msg)
                }
            })
        },
        //删除
        delRow(row){
            this.$confirm("是否删除当前数据?","删除确认",{
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(()=>{
                this.$http.post('/Settlementpre/delete',{id:row.id}).then(res=>{
                    if(res.data.code=== 0 ){
                        this.$message.success('删除成功!')
                        this.reload()
                    }else{
                        this.$message.error(res.data.msg)
                    }
                })
            }).catch(() => { });
            
        },
        handleSelectionChange(val) {
            this.selection = val;
        },
        //多个分成比例
        modifiedScaleMore(){
            if(this.selection&&this.selection.length>0){
                this.ids=[]
                this.selection.forEach(item=>{
                    this.ids.push(item.id)
                })
                this.dialogVisible=true
            }else{
                this.$message.warning('请选择需要修改的分成比例!')
            }
        },
        //单个分成比例
        modifiedScaleOne(row){
            this.ids=[]
            this.ids.push(row.id)
            this.dialogVisible=true
        },
        //弹框确定事件
        dialogSubmit(){
            if(this.proportion&&this.proportion.length>0){
                this.$http.post('/Settlementpre/updateProportion',{
                    id:this.ids,
                    proportion:this.proportion
                }).then(res=>{
                    if(res.data.code === 0){
                        this.$message.success("修改成功!");
                        this.dialogVisible=false;
                        this.ids=[];
                        this.proportion='';
                        this.reload()
                    }else{
                        this.$message.error(res.data.msg)
                    }
                })
            }else{
                this.$message.warning('请输入分成比例!')  
            }
        },
        /* 刷新表格 */
        reload() {
            this.$http.post('/Settlementpre/index',this.where).then(res=>{
                if(res.data.code === 0){
                    this.allData=res.data.allData
                    this.tableData=res.data.data
                }else{
                    this.$message.error(res.data.msg)
                }
            })
        },
        /* 重置搜索 */
        reset() {
            this.where = {};
            this.reload();
        },
        // 导入
        handlePreview(file) {
            console.log(file)
        },
        handleRemove() {
            this.fileList = []
        },
        successUpload(response) {
            this.$set(this.fileList, this.fileList.length, {
                file_name: response.data.file_name,
                save_name: response.data.save_name,
                file_size: response.data.file_size,
                name: response.data.file_name
            })
            let url = response.data.save_name
            this.$http
                .post('/Settlementpre/importEvent', { url: url })
                .then((res) => {
                if (res.data.code === 0) {
                    this.$message.success(res.data.msg)
                    this.fileList = []
                    this.reload()
                } else {
                    this.$message.error(res.data.msg)
                    this.fileList = []
                    this.reload()
                }
                })
        },
        beforeRemove(file) {
            return this.$confirm(`确定移除 ${file.name}？`)
        },
        handleExceed() {
            this.$message.warning(`当前限制选择 1 个文件`)
        },
        // 导入
        handlePreview1(file) {
            console.log(file)
        },
        handleRemove1() {
            this.fileList1 = []
        },
        successUpload1(response) {
            this.$set(this.fileList1, this.fileList1.length, {
                file_name: response.data.file_name,
                save_name: response.data.save_name,
                file_size: response.data.file_size,
                name: response.data.file_name
            })
            let url = response.data.save_name
            this.$http
                .post('/Settlementpre/importQueue', { url: url })
                .then((res) => {
                if (res.data.code === 0) {
                    this.$message.success(res.data.msg)
                    this.fileList1 = []
                    this.reload()
                } else {
                    this.$message.error(res.data.msg)
                    this.fileList1 = []
                    this.reload()
                }
                })
        },
        // 下载自动结算模板
        updateAuto(){
            window.location.href = `${process.env.VUE_APP_API_BASE_URL}/static/template/settlement_queue_template.xls`
        },
        // 导入模板
        templateImport() {
            window.location.href = `${process.env.VUE_APP_API_BASE_URL}/static/template/event_template.xls`
        },
    }
}
</script>
<style scoped>
.total-card{
    width: 100%;
    height: 40px;
    margin-bottom: 10px;
    border: 1px solid var(--border-color-lighter);
    border-radius: 10px;
    line-height: 40px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    margin-left:0px !important;
}
.dialog-box{
    width: 100%;
    display: flex;
    height: 40px;
    line-height: 40px;
}
.dialog-box-left{
    width: 120px;
    text-align: right;
    font-weight: bold;
    margin-right: 10px;
}
</style>